<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/detail.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
    <div id="header">
        <div class="h_inner container">
            <div class="box">
                <a href="#"><i class="iconfont icon-loc-s"></i><span>广东</span></a>
                <ul>
                    <li><a href="#">北京</a></li>
                    <li><a href="#">上海</a></li>
                    <li><a href="#">天津</a></li>
                    <li><a href="#">重庆</a></li>
                    <li><a href="#">河北</a></li>
                    <li><a href="#">山西</a></li>
                    <li><a href="#">河南</a></li>
                    <li><a href="#">辽宁</a></li>
                    <li><a href="#">吉林</a></li>
                    <li><a href="#">黑龙江</a></li>
                    <li><a href="#">内蒙古</a></li>
                    <li><a href="#">江苏</a></li>
                    <li><a href="#">山东</a></li>
                    <li><a href="#">安徽</a></li>
                    <li><a href="#">浙江</a></li>
                    <li><a href="#">福建</a></li>
                    <li><a href="#">湖北</a></li>
                    <li><a href="#">湖南</a></li>
                    <li><a href="#">广东</a></li>
                    <li><a href="#">广西</a></li>
                    <li><a href="#">江西</a></li>
                    <li><a href="#">四川</a></li>
                    <li><a href="#">海南</a></li>
                    <li><a href="#">贵州</a></li>
                    <li><a href="#">云南</a></li>
                    <li><a href="#">西藏</a></li>
                    <li><a href="#">陕西</a></li>
                    <li><a href="#">甘肃</a></li>
                    <li><a href="#">青海</a></li>
                    <li><a href="#">宁夏</a></li>
                    <li><a href="#">新疆</a></li>
                    <li><a href="#">港澳</a></li>
                    <li><a href="#">台湾</a></li>
                    <li><a href="#">钓鱼岛</a></li>
                    <li><a href="#">海外</a></li>
                </ul>
            </div>
            <div class="nav">
                    <a href="#" class="a_login">你好，请登录</a><span>|</span>
                    <a href="#" class="a_register">免费注册</a><span>|</span>
                    <div class="user_box"><a href="#" class="a_box"><b class="user_id"></b>的京东<i class="iconfont icon-kefu"></i></a><span>|</span><ul class="user_more">
                        <dl><dt><img src="./images/plus.png" alt=""></dt><dd>PLUS会员</dd></dl>
                        <dl><dt><img src="./images/plus02.png" alt=""></dt><dd>运费减免</dd></dl>
                        <dl><dt><img src="./images/plus03.png" alt=""></dt><dd>生日特权</dd></dl>
                        <span class="exit">退出</span>
                    </ul></div>
                    <a href="#">我的订单</a><span>|</span>
                    <div class="n_box"><a href="#" class="a_box">我的京东</a><span>|</span><ul>
                        <li><a href="#">待处理订单</a></li>
                        <li><a href="#">消息</a></li>
                        <li><a href="#">返修退换货</a></li>
                        <li><a href="#">我的问答</a></li>
                        <li><a href="#">降价商品</a></li>
                        <li><a href="#">我的关注</a></li>
                        <li><a href="#">我的京豆</a></li>
                        <li><a href="#">我的优惠券</a></li>
                        <li><a href="#">我的白条</a></li>
                        <li><a href="#">我的理财</a></li>
                    </ul></div>
                    <a href="#">京东会员</a><span>|</span>
                    <div class="n_box"><a href="#" class="a_box">企业采购</a><span>|</span><ul>
                        <li><a href="#">待处理订单</a></li>
                        <li><a href="#">消息</a></li>
                        <li><a href="#">返修退换货</a></li>
                        <li><a href="#">我的问答</a></li>
                        <li><a href="#">降价商品</a></li>
                        <li><a href="#">我的关注</a></li>
                        <li><a href="#">我的京豆</a></li>
                        <li><a href="#">我的优惠券</a></li>
                        <li><a href="#">我的白条</a></li>
                        <li><a href="#">我的理财</a></li>
                    </ul></div>
                    <div class="n_box"><a href="#" class="a_box">客户服务</a><span>|</span><ul class="u_right">
                        <li><a href="#">待处理订单</a></li>
                        <li><a href="#">消息</a></li>
                        <li><a href="#">返修退换货</a></li>
                        <li><a href="#">我的问答</a></li>
                        <li><a href="#">降价商品</a></li>
                        <li><a href="#">我的关注</a></li>
                        <li><a href="#">我的京豆</a></li>
                        <li><a href="#">我的优惠券</a></li>
                        <li><a href="#">我的白条</a></li>
                        <li><a href="#">我的理财</a></li>
                    </ul></div>
                    <a href="#">网站导航</a><span>|</span>
                    <a href="#">手机京东</a>
            </div>
        </div>
    </div>
    <div id="nav">
        <div class="n_inner container clearfix">
            <div class="img"><a href="#">京东</a></div>
            <div class="nav_box">
                <b>全部分类</b>
                <ul>
                    <li><a href="#">家用电器</a></li>
                    <li><a href="#">手机、运营商、数码</a></li>
                    <li><a href="#">电脑、办公</a></li>
                    <li><a href="#">家居、家具、家装、厨具</a></li>
                    <li><a href="#">男装、女装、童装、内衣</a></li>
                    <li><a href="#">美妆、个护清洁、宠物</a></li>
                    <li><a href="#">女鞋、箱包、钟表、珠宝</a></li>
                    <li><a href="#">男鞋、运动、户外</a></li>
                    <li><a href="#">房产、汽车、汽车用品</a></li>
                    <li><a href="#">母婴、玩具乐器</a></li>
                    <li><a href="#">食品、酒类、生鲜、特产</a></li>
                    <li><a href="#">艺术、礼品鲜花、农资绿植</a></li>
                    <li><a href="#">医药保健、计生情趣</a></li>
                    <li><a href="#">图书、文娱、教育、电子书</a></li>
                    <li><a href="#">机票、酒店、旅游、生活</a></li>
                    <li><a href="#">理财、众筹、白条、保险</a></li>
                    <li><a href="#">安装、维修、清洗、二手</a></li>
                    <li><a href="#">工业品</a></li>
                </ul>
            </div>
            <div class="box">
                <div class="search">
                    <input type="text" placeholder="电动自行车">
                    <a href=""><input type="button" class="btn" value="搜本店"></a>
                    <a href=""><input type="button" class="btn2" value="搜全站"></a>
                    <a href="#" class="cart"><i class="iconfont icon-gouwuche"></i>我的购物车</a>
                </div>
                <ul class="hot clearfix">
                    <li><a href="#">新品手机</a></li>
                    <li><a href="#">星巴克</a></li>
                    <li><a href="#">美妆护肤</a></li>
                    <li><a href="#">电脑直降</a></li>
                    <li><a href="#">京东电脑</a></li>
                    <li><a href="#">好物推荐</a></li>
                    <li><a href="#">汽车好物</a></li>
                </ul>
            </div>
        </div>    
    </div>
    <div id="main">
        <div class="m_inner container clearfix">
            <div class="enlarge">
                <div class="middle">
                    <div class="shade"></div>
                    <img src="./images/big01.jpg" alt="">
                    <div class="big">
                        <img src="./images/big01.jpg" alt="">
                    </div>
                </div>
                <div class="small">
                    <img src="./images/big01.jpg" alt="" class="active">
                    <img src="./images/big02.jpg" alt="">
                    <img src="./images/big03.jpg" alt="">
                    <img src="./images/big04.jpg" alt="">
                    <img src="./images/big05.jpg" alt="">
                </div>
                <div class="bottom">
                    <i class="iconfont icon-kefu"></i><span>关注</span>
                    <i class="iconfont icon-fengxiang0"></i><span>分享</span>
                    <i class="iconfont icon-huafei"></i><span>对比</span>
                    <span>举报</span>
                </div>
                <div class="more"><a href="">企业购更优惠</a></div>
            </div>
            <div class="show">
                <div class="s_title">
                    <img src="./images/de01.png" alt=""><b>罗技（G）G102 游戏鼠标 黑色 RGB鼠标 吃鸡鼠标 绝地求生 轻量化设计 200-8000DPI G102第二代 </b>
                </div>
                <p class="introduce">G102第二代炫彩升级，性能更加强悍，游戏级200-8000DPI，RGB流光灯效，双色可选</p>
                <div class="s_price">
                    <b>秒 杀 价</b><strong>￥</strong><span class="now_price">105.00</span><b class="b2">[￥109.00]</b><a href="">降价通知</a>
                    <div class="pinjia"><p>累积评价</p><a href="">200万+</a></div>
                    <p><b>促 &nbsp; &nbsp; 销</b><span class="bor">换购</span>购买1件可优惠换购热销商品&nbsp;<a href="">立即换购>></a></p>
                    <p><span class="bor">满额返券</span>3.1-3.31期间购买自营文具等产品并确认收货，订单实际支付金额满30元即返自营文具配件优惠券</p>
                </div>
                <p class="pp1"><b>增值业务</b><img src="./images/detail03.png" alt=""></p>
                <p class="pp1">
                    <b>配 送 至</b>
                    <select name="city">
                    <option value="福建">福建省莆田市涵江区</option>
                    <option value="厦门">厦门岛内</option>
                    <option value="莆田">广东省深圳市</option>
                    <option value="泉州">泉州</option>
                    <option value="福州">福州</option>
                </select>&nbsp;&nbsp;<span>有货</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>支持</span>
                <a href="">可配送海外</a><span class="sp1">|</span>
                <a href="">99元免基础运费</a><span class="sp1">|</span>
                <a href="">自助装机</a><span class="sp1">|</span>
                <a href="">检测以换代修</a>
            </p>
            <p class="pp1">
                <img src="./images/detail04.png" alt="" class="jd">
                <a href="">京准达</a><span class="sp1">|</span>
                <a href="">211限时达</a><span class="sp1">|</span>
                <a href="">京尊达</a>
            </p>
            <p class="pp1">由&nbsp;<b>京东</b>&nbsp;发货,并提供售后服务.23:10前下单，预计<span>明天(03月18日)</span>送达</p>
            <p class="pp1"><b>重 &nbsp; &nbsp; 量</b><span>0.16kg</span></p>
            <b class="gray">配 送 至</b><p class="p_img"><img src="./images/li01.png" alt=""><img src="./images/li02.png" alt=""><img src="./images/li03.png" alt=""><img src="./images/li04.png" alt=""><img src="./images/li05.png" alt=""><img src="./images/li01.png" alt=""><img src="./images/li02.png" alt=""><img src="./images/li03.png" alt=""><img src="./images/li04.png" alt=""><img src="./images/li05.png" alt=""></p>
            <div class="buy">
                <div class="buyit">
                    <input type="text" value="1"><a href="" class="add">+</a><a href="" class="dec">-</a>
                </div>
                <a href="#" class="pay_for">加入购物车</a>
            </div>
            </div>
        </div>
    </div>
    <div id="info">
        <div class="in_inner container clearfix">
            <div class="left_box">
                <div class="shop">
                    <div class="s_head"><span>罗技G京东自营旗舰店</span></div>
                    <div class="s_foot"><a href=""><i class="iconfont icon-shouye"></i>进店逛逛</a><a href=""><i class="iconfont icon-wode"></i>进店逛逛</a></div>
                </div>
                <div class="shop">
                    <div class="s_head"><span>热销排行榜</span></div>
                    <div class="s_foot">
                        <ul>
                            <li><a href="" class="first">同品牌</a></li>
                            <li><a href="">同价位</a></li>
                            <li><a href="">总排行</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="rig_box">
                <ul>
                    <li><a href="" class="first">商品介绍</a></li>
                    <li><a href="">规格与包装</a></li>
                    <li><a href="">售后保障</a></li>
                    <li><a href="">商品评价</a></li>
                    <li><a href="">商品问答</a></li>
                    <li class="right"><a href="#" class="pay_for">加入购物车</a></li>
                </ul>
                <img src="./images/li06.png" alt="">
                <a href="" class="a_more">更多参数>></a>
            </div>
            <div class="rig_box1">
                <div class="rg_head">售后保障</div>
                <img src="./images/li07.png" alt="">
            </div>
        </div>
    </div>
    <div id="footer">
        <div class="f_inner container">
            <div class=f_top01><i></i>
                <p>品类齐全,轻松购物</p>
            </div>
            <div class=f_top02><i></i>
                <p>多仓直发,极速配送</p>
            </div>
            <div class=f_top03><i></i>
                <p>正品行货,精致服务</p>
            </div>
            <div class=f_top04><i></i>
                <p>天天低价,畅选无忧</p>
            </div>
        </div>
    </div>
    <div id="fnav">
        <div class="fna_in container">
            <div class="fn_box">
                <dl>
                    <dt>购物指南</dt>
                    <dd><a href=#>购物流程</a></dd>
                    <dd><a href=#>会员介绍</a></dd>
                    <dd><a href=#>生活旅行</a></dd>
                    <dd><a href=#>常见问题</a></dd>
                    <dd><a href=#>大家电</a></dd>
                    <dd><a href=#>联系客服</a></dd>
                </dl>
                <dl>
                    <dt>配送方式</dt>
                    <dd><a href=#>上门自提</a></dd>
                    <dd><a href=#>211限时达</a></dd>
                    <dd><a href=#>配送服务查询</a></dd>
                    <dd><a href=#>配送费收取标准</a></dd>
                    <dd><a href=#>海外配送</a></dd>
                </dl>
                <dl>
                    <dt>支付方式</dt>
                    <dd><a href=#>货到付款</a></dd>
                    <dd><a href=#>在线支付</a></dd>
                    <dd><a href=#>分期付款</a></dd>
                    <dd><a href=#>公司转账</a></dd>
                </dl>
                <dl>
                    <dt>售后服务</dt>
                    <dd><a href=#>售后政策</a></dd>
                    <dd><a href=#>价格保护</a></dd>
                    <dd><a href=#>退款说明</a></dd>
                    <dd><a href=#>返修/退换货</a></dd>
                    <dd><a href=#>取消订单</a></dd>
                </dl>
                <dl>
                    <dt>特色服务</dt>
                    <dd><a href=#>夺宝岛</a></dd>
                    <dd><a href=#>DIY装机</a></dd>
                    <dd><a href=#>延保服务</a></dd>
                    <dd><a href=#>京东E卡</a></dd>
                    <dd><a href=#>京东通信</a></dd>
                    <dd><a href=#>京鱼座智能</a></dd>
                </dl>
                <dl>
                    <dt>京东自营覆盖区县</dt>
                    <dd>京东已向全国2661个区县提供自营配送服务,支持货到付款.POS机刷卡和售后上门服务。<br><a href=#>查看详情></a></dd>
                </dl>
            </div>
            <ul class=aboutUs>
                <li><a href=#>关于我们</a><span>|</span></li>
                <li><a href=#>联系我们</a><span>|</span></li>
                <li><a href=#>联系客服</a><span>|</span></li>
                <li><a href=#>合作招商</a><span>|</span></li>
                <li><a href=#>商家帮助</a><span>|</span></li>
                <li><a href=#>营销中心</a><span>|</span></li>
                <li><a href=#>手机京东</a><span>|</span></li>
                <li><a href=#>友情链接</a><span>|</span></li>
                <li><a href=#>销售联盟</a><span>|</span></li>
                <li><a href=#>京东社区</a><span>|</span></li>
                <li><a href=#>风险监测</a><span>|</span></li>
                <li><a href=#>隐私政策</a><span>|</span></li>
                <li><a href=#>京东公益</a><span>|</span></li>
                <li><a href=#>English Site</a><span>|</span></li>
                <li><a href=#>Media & IR</a></li>
            </ul>
            <ul class=putOnRecords>
                <li><a href=#>京公网安备1100002000088号</a><span>|</span></li>
                <li><a href=#>京ICP证070359号</a><span>|</span></li>
                <li><a href=#>互联网药品信息服务资格证编号(京)经营性-2014-0008</a><span>|</span></li>
                <li><a href=#>新出发京零字第大120007号</a></li>
            </ul>
            <ul class=putOnRecords1>
                <li><a href=#>互联网出版许可证编号新出网证(京)字150号</a><span>|</span></li>
                <li><a href=#>出版物经营许可证</a><span>|</span></li>
                <li><a href=#>网络文化经营许可证京网文[2014]2148-348号</a><span>|</span></li>
                <li><a href=#>违法和不良信息举报电话:4006561155</a></li>
            </ul>
            <ul class=putOnRecords>
                <li><a href=#>Copyright @ 2004 - 2020京东JD.com版权所有</a><span>|</span></li>
                <li><a href=#>消费者维权热线:4006067733经营证照</a><span>|</span></li>
                <li><a href=#>(京)网械平台备字(2018)第00003号</a><span>|</span></li>
                <li><a href=#>营业执照</a></li>
            </ul>
            <ul class=putOnRecords2>
                <li><i></i><a href=#>Global Site</a><span>|</span></li>
                <li><i></i><a href=#>Сайт России</a><span>|</span></li>
                <li><i></i><a href=#>Situs Indonesia</a><span>|</span></li>
                <li><i></i><a href=#>Sitio de España</a><span>|</span></li>
                <li><i></i><a href=#>เว็บไซต์ประเทศไทย</a></li>
            </ul>
            <ul class=sub>
                <li>京东旗下网站：<a href=#>京东钱包</a><span>|</span></li>
                <li><a href=#>京东智联云</a></li>
            </ul>
            <img src="./images/fnal.png" alt="" class="finall">
        </div>
    </div>
    <script src="./js/jquery-3.5.1.js"></script>
    <script src="./js/tools.js"></script>
    <script src="./js/layer/layer.js"></script>
    <script src="./js/detail.js"></script>
</body>
</html>